<template>
    <div>
        <Row :gutter="20">
            <Col :md="24" :lg="8">
            <Row class-name="home-page-row1" :gutter="10">
                <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                <Card>
                    <Row type="flex" class="user-infor">
                        <Col span="8">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <img class="avator-img" :src="avatorPath" />
                        </Row>
                        </Col>
                        <Col span="16" style="padding-left:6px;">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <div>
                                <b class="card-user-infor-name"> {{ user_name }} </b>
                                <p> {{real_name}} </p>
                                <span style="font-size: 0.1em;">系统版本：{{system_version}}</span>
                            </div>
                        </Row>
                        </Col>
                    </Row>
                    <div class="line-gray"></div>
                </Card>
                </Col>
            </Row>
            </Col>
        </Row>

    </div>
</template>

<script>
    import Cookies from "js-cookie";
    import axios from "@/libs/api.request";
    export default {
        name: 'home',
        components: {

        },
        data() {
            return {
                system_version: VERSION,
                flag: true
            }
        },
        computed: {
            avatorPath() {
                return 'https://haiyue-1255346517.file.myqcloud.com/static/user.png'
            },
            user_name() {
                return this.$store.state.user.userName
            },
            real_name() {
                return this.$store.state.user.realName
            }
        }
    }
</script>

<style lang="less">
    .count-style {
        font-size: 50px;
    }

    .user-infor {
        height: 135px;
    }

    .avator-img {
        display: block;
        width: 80%;
        max-width: 100px;
        height: auto;
    }

    .card-user-infor-name {
        font-size: 2em;
        color: #2d8cf0;
    }

    .card-title {
        color: #abafbd;
    }

    .made-child-con-middle {
        height: 100%;
    }

    .to-do-list-con {
        height: 145px;
        overflow: auto;
    }

    .to-do-item {
        padding: 2px;
    }

    .infor-card-con {
        height: 100px;
    }

    .infor-card-icon-con {
        height: 100%;
        color: white;
        border-radius: 3px 0 0 3px;
    }

    .map-con {
        height: 305px;
    }

    .map-incon {
        height: 100%;
    }

    .data-source-row {
        height: 200px;
    }

    .line-chart-con {
        height: 150px;
    }

    .line-gray {
        border-bottom: 2px solid #268cea;
        height: 0;
    }
</style>